//接收调课申请

import React, { useEffect, useState,useRef } from 'react';
import { Layout, Menu, Table, Input, Button, Space, Spin,Popconfirm,Pagination } from 'antd';
import { SearchOutlined,CheckOutlined ,CloseOutlined} from '@ant-design/icons';
import {getCoachAppliAPI} from "@/api/coach";
import './index.scss'
import { useDispatch, useSelector } from 'react-redux';
import { updateAppliAPI } from '@/api/admin';
import { useReTip } from '@/hooks/useReTip';
import {getUserId} from "@/utils/userId";
// import 'antd/dist/antd.css'; // 引入antd样式

const { Header, Content, Footer } = Layout;


const Accept = () => {
  const dispatch = useDispatch()
  const [loading, setLoading] = useState(false);
  const {handleRemind} = useReTip()

  //存储申请列表
  const [appliList,setAppliList] = useState(
   [
    {
        userId:'',
      name: '',
      phone:'',
      subject: '',
      reason: '',
      date: '',
      hopeDate:'',
      judgement:[]
    }
   ]
  )
  useEffect(() => {
    let isMounted = true;
    // 定义一个异步函数来获取数据
    async function fetchData() {
        try {
            const res = await getCoachAppliAPI(getUserId());
            console.log("申请：", res);
            if(isMounted){
            // 解析后端返回的数据，过滤appState为-1的项
            const parsedData = res.data.filter(item => item.appState === -1);

            // 转换数据结构
            const formattedData = parsedData.map(item => ({
                studentId: item.studentId,
                name: item.name,
                phone: item.phone,
                subject: item.subject,
                reason: item.reason,
                date: item.date,
                hopeDate: item.hopeDate,
                judgement: [
                    <button className='button-judgement' onClick={() => handConfirm(item.studentId)}><CheckOutlined /></button>,
                    ' ',
                    <Popconfirm
                        title="是否确认不通过？"
                        cancelText="否"
                        okText="是"
                        onConfirm={(e) => onConfirmApp(e, item.studentId)}
                    >
                        <CloseOutlined />
                    </Popconfirm>
                ]
            }));

            // 设置数据

            setAppliList(formattedData);
          }
        } catch (error) {
            console.error("获取申请列表数据时出错:", error);
        }
    }

    // 立即执行异步函数
    fetchData();
    return() =>{
      isMounted =false
    }
}, []);

  //存储审核状态 0：通过初审，1:不过审，2：过审
  //监听不过审请求
  const onConfirmApp=async(e,studentId) =>{
    const res= await updateAppliAPI(studentId,"1")
    handleRemind(res.status,'审核')
  }
//监听通过初审请求
const handConfirm = async(e)=>{
   const res= await updateAppliAPI(e,"0")
   handleRemind(res.status,'审核')
}
  return (
      <Layout className="business-evaluation-manager">
      <Header>
        <div className="header-content">
          <Menu theme="dark" mode="horizontal">
            <Menu.Item key="1">审批课程预约</Menu.Item>
          </Menu>
        </div>
      </Header>
      <Content>
        <Spin spinning={loading}>
          <Table
            dataSource={appliList}
            rowKey="studentId"
            pagination={{ pageSize: 10 }}
            columns={[
              { title: '学员学号', dataIndex: 'studentId' },
              { title: '学员姓名', dataIndex: 'name' },
              { title: '联系电话', dataIndex: 'phone' },
              { title: '调课科目', dataIndex: 'subject' },
              { title: '调课原因', dataIndex: 'reason' },
              { title: '原上课时间', dataIndex: 'date' },
              { title: '期望上课时间', dataIndex: 'hopeDate' },
              { title: '是否同意', dataIndex: 'judgement' },
              // 其他列...
            ]}
          />
        </Spin>
      </Content>
      <Footer>
     <div style={{position:'absolute',left:'50%'}}>驾校管理系统&copy;2024-2099</div>
   </Footer>
    </Layout>


  );
};

export default Accept;
